<template>
  <div>
     <!-- v-model 可以双向绑定数据，数据可以驱动视图 -->
     <!-- <input type="text" v-model='msg'> -->
     <!-- v-model 修饰符  .number .trim .lazy -->
     <form @sumbit.prevent='fn1'>
        <input type="text" name="username" v-model.lazy.trim='form.username'>

        <input type="text" name="password" v-model='form.password'>
        <button>提交</button>
        <!-- <button @click.prevent='fn'>提交</button> -->
    </form>
   </div>
</template>
 
<script>
export default {
  data() {
    return {
      msg:'杭州第一场雪',
      form:{
         username:'',
         password:'',  
      }
      
    };
  },
  methods: {
    fn(){
      console.log(this.form.username,this.form.password);
    },
    fn1(){
      console.log(this.form);
      
    }
  }
};
</script>

<style scoped>
     
</style>